<script lang="ts" setup name="login">
import { reactive, ref, watchEffect } from "vue";
import { Message, Notification } from "@arco-design/web-vue";

import type { FormInstance } from "@arco-design/web-vue/es/form";
import type { Route } from "@/router/interface";
import useStorage from "@/hooks/storage";
import { login, getMenu } from "@/api/modules/login";
import { useRouter } from "vue-router";
import { get, post } from "@/api/http";
import { getTimeState } from "@/utils/date";
import { useAuthStore } from "@/stores/";
const authStore = useAuthStore();

// const getMenu = get("/local/menu", { id: 1 });

watchEffect(() => {
  getMenu().then((list: Route[]) => {
    authStore.setMenu(list);
  });
});

const router = useRouter();
const storage = useStorage("local");

const form = reactive(
  storage.get("loginForm") || {
    name: "",
    password: "",
    role: "",
    isSave: false,
  }
);
const formRef = ref<FormInstance>();
const loading = ref(false);

const onSubmit = async () => {
  const errors = await formRef.value?.validate();
  if (errors) return Message.warning("未填写完整");
  loading.value = true;

  login(form).then(() => {
    loading.value = true;
    authStore.setUserInfo(form);
    router.push("/layout");

    const title = import.meta.env.VITE_APP_TITLE;
    Notification.success({
      title: getTimeState(),
      content: "欢迎登录" + title,
    });

    if (form.isSave) storage.set("loginForm", form);
  });
};

const passwordReg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/;
</script>

<template>
  <div id="login" class="full-v flex-center bg">
    <div
      class="w-400px bg-light-50 p-30px rounded-10px transition hover:rounded-15px opacity-80"
    >
      <p class="text-center text-26px font-bold text-indigo-600">登录</p>
      <a-form ref="formRef" :model="form" layout="vertical">
        <a-form-item
          field="name"
          label="用户名"
          :rules="[
            { required: true, message: '该项为必填项' },
            { minLength: 3, message: '长度不能小于3' },
          ]"
          :validate-trigger="['change', 'input']"
        >
          <a-input v-model="form.name" placeholder="请输入用户名" />
        </a-form-item>
        <a-form-item
          field="password"
          label="密码"
          :rules="[
            { required: true, message: '该项为必填项' },
            {
              // validator: validatePassCheck,
              match: passwordReg,
              message:
                '密码必须包含1个大写字母，1个小写字母和1个数字，且长度为8~16',
            },
          ]"
          :validate-trigger="['change', 'input']"
        >
          <a-input-password
            v-model="form.password"
            placeholder="请输入密码"
            @keyup.enter="onSubmit"
          />
        </a-form-item>
        <a-form-item
          field="role"
          label="角色"
          :rules="[
            { required: true, message: '该项为必填项' },
            { match: /admin/, message: '请使用管理员登录' },
          ]"
        >
          <a-select v-model="form.role" placeholder="请选择角色">
            <a-option value="admin">管理员</a-option>
            <a-option value="user">用户</a-option>
            <a-option value="test">测试</a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="isSave">
          <a-checkbox v-model="form.isSave">记住我</a-checkbox>
        </a-form-item>
        <a-form-item>
          <a-button @click="onSubmit" type="primary" long :loading="loading"
            >登录</a-button
          >
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<style lang="less" scoped>
.bg {
  background: linear-gradient(135deg, #ee7752, #fab2ff, #23a6d5, #23d5ab);
  background-size: 200% 200%;
  animation: gradientBG 8s ease infinite;
}

@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }
  25% {
    background-position: 50% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
</style>
